<template>
    <div class="home">
        <header class="header">
            <header-bar></header-bar>
        </header>
        <main class="main">
            <div class="side-menu">
                <side-menu></side-menu>
            </div>
            <div class="home-content">
                <div ref="tagsNavRow" class="tags-nav-row">
                    <div class="left-icon icon">
                        <img @click="leftMove" :src="require('@img/icon-arrow-left.png')" alt="图片" width="24px"
                             height="24px">
                    </div>
                    <div @click="toHome()" class="app-name-home">
                        <img :src="isActiveHome ? iconHomeGolden : iconHomeBlack" alt="图标" width="18px" height="18px">
                        <div :class="{'active-home':isActiveHome}">首页</div>
                    </div>
                    <div ref="moduleList" class="module-list"
                         :style="{'margin-left': moveNumber * moveStep + 'px'}">
                        <tags-nav class="module-list-tag" v-for="(item,index) in $store.state.tagNavList" :item="item"
                                  :key="index"/>
                    </div>
                    <div class="right-icon icon">
                        <img @click="rightMove" :src="require('@img/icon-arrow-right.png')" alt="图片" width="24px"
                             height="24px">
                    </div>
                    <div ref="headerClosePanel" class="close-panel">
                        <img class="close-img" @click="showClosePanel" :src="require('@img/icon-close-circle.png')" alt="图片" width="21px"
                             height="21px">
                        <div v-show="showRight" class="main-right-menu">
                            <div @click="closePanel('other')" class="main-right-menu-item">关闭其他</div>
                            <div @click="closePanel('all')" class="main-right-menu-item">关闭所有</div>
                        </div>
                    </div>
                </div>
                <keep-alive :include="cacheList" :max="50">
                    <router-view/>
                </keep-alive>
            </div>
        </main>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HeaderBar from './headder-bar/HeaderBar'
    import SideMenu from './side-menu/SideMenu'
    import TagsNav from './tags-nav/TagsNav'
    import routers from '../../router/routers'
    import iconHomeGolden from '@img/icon-home-golden.png'
    import iconHomeBlack from '@img/icon-home-black.png'

    export default {
        name: 'Main',
        components: {
            HeaderBar, SideMenu, TagsNav
        },
        computed: {
            cacheList() {
                return ['ParentView', ...this.$store.state.cacheList]
            },
            isActiveHome() {
                return this.$route.name === 'home';
            }
        },
        watch: {
            '$route'(newRoute) {
                if (newRoute.name === 'home') return;
                const tagNavList = this.$util.tagNavList(newRoute);
                this.$store.state.tagNavList = tagNavList;

                if (Array.isArray(tagNavList)) {
                    this.$store.state.cacheList = tagNavList.map(item => {
                        return item.name
                    }).filter(Boolean)
                }
            }
        },
        created() {
            document.addEventListener('click', this.clickListener);

            const tagNavList = JSON.parse(sessionStorage.getItem('tagNavListCache'));
            if (tagNavList) {
                this.$store.state.tagNavList = tagNavList;
            }
        },
        beforeDestroy() {
            document.removeEventListener('click', this.clickListener)
        },
        data() {
            return {
                iconHomeGolden: iconHomeGolden,
                iconHomeBlack: iconHomeBlack,
                activeHome: false,

                moveNumber: 0,
                moveStep: 100,

                showRight:false
            }
        },
        methods: {
            clickListener(event) {
                if (this.$refs.headerClosePanel && !this.$refs.headerClosePanel.contains(event.target)) {
                    this.showRight = false;
                }
            },

            toHome() {
                if (this.$route.name === 'home') return;
                this.$navTo('/home')
            },
            /*左右箭头滑动函数*/
            leftMove() {
                const tagsNavRowWidth = this.$refs.tagsNavRow.clientWidth;
                const moduleListWidth = this.$refs.moduleList.clientWidth;
                const moveWidth = Math.abs(this.moveNumber * this.moveStep);
                const diffWidth = Math.abs(tagsNavRowWidth - moduleListWidth);

                //元素可视窗口宽度，大于子元素宽度时禁止往左移动
                if (diffWidth > moduleListWidth) {
                    return
                }

                //往左移动的的距离大于子元素的宽度时，禁止再往左移动
                if (moveWidth > (diffWidth + this.moveStep)) {
                    return;
                }

                this.moveNumber -= 1;
            },
            rightMove() {
                if (this.moveNumber < 0) {
                    this.moveNumber += 1;
                }
            },
            showClosePanel(){
                this.showRight = true;
            },
            closePanel(type) {
                const item = {
                    name: this.$route.name,
                    query: this.$route.query,
                    params: this.$route.params,
                    meta: this.$route.meta,
                    path: this.$route.path,
                    active:false
                };

                this.showRight = false;
                let list = [];
                if (type === 'all') {
                    list = this.$util.closeAllTagNav();
                }
                if (type === 'other') {
                    list = this.$util.closeOtherTagNav(item);
                }

                this.$store.state.tagNavList = list;
            }
        }
    }
</script>
<style scoped>
    .home {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    .header {
        width: 100%;
        color: #ffffff;
        position: relative;
    }

    .main {
        display: flex;
        position: absolute;
        top: 60px;
        left: 0;
        bottom: 0;
        right: 0;
        background: #f0f0f0;
        width: 100%;
    }

    .side-menu {
        width: 250px;
        background: linear-gradient(to bottom, #2a2b30 0%, #292a2f 100%);
        color: #ffffff;
        min-width: 250px;
    }

    .home-content {
        flex: 1;
        padding: 35px 10px 10px 10px;
        position: relative;
        width: calc(100% - 270px);
    }

    .tags-nav-row {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        padding: 0 24px;

        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tags-nav-row::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    .app-name-home {
        display: flex;
        align-items: center;
        padding-right: 5px;
        color: #666666;
        font-weight: bold;
        padding-left: 7px;
        min-width: 50px;
        position: absolute;
        z-index: 3;
        background: #ffffff;
    }

    .app-name-home:hover {
        cursor: pointer;
    }

    .active-home {
        color: #f6ca9d;
    }

    /*左右箭头样式-start*/
    .module-list {
        display: flex;
        padding: 0 24px 0 62px;
        align-items: center;
        overflow: hidden;
    }

    .module-list-tag {
        width: 100%;
    }

    .icon {
        z-index: 2;
        position: absolute;
        background: #ffffff;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 0;
    }

    .left-icon {
        left: 0;
    }

    .right-icon {
        right: 45px;
        padding-left: 5px;
    }
    /*箭头的样式-end*/

    /*个人中心面板*/
    .close-img{
        z-index: 2;
        position: absolute;
        background: #ffffff;
        display: flex;
        align-items: center;
        right: 0;
        padding-right: 17px;
        padding-left: 7px;
        top: 5px;
    }

    .main-right-menu {
        width: 90px;
        position: fixed;
        top: 90px;
        right: 7px;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 2px 2px #f5f5f5;
        z-index: 788;
    }

    .main-right-menu-item:hover {
        cursor: pointer;
        background: #e6bf7d;
        border-radius: 4px;
        color: #ffffff;
    }
</style>